<template>
   <!-- 放置一个弹层 用来编辑新增节点 -->
   <el-dialog :title="`${showText}权限点`" :visible.sync="showDialog" @close="btnCancel">
      <!-- 表单   el-form  三要素   model  rules   ref   el-form-item 要有 prop -->
      <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formData.name" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" style="width:90%" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="formData.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="showDialog=false">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
</template>
<script>
import { addPermission,updatePermission,getPermissionDetail} from '@/api/permisson'
export default {
  name:'permInfo',
  data() {
    return {
      showDialog: false,
      // 表单数据对象
      formData:{},
      // 验证规则对象
      rules:{
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showText() {
      return this.formData.id ? '修改':'添加'
    }
  },
  methods: {
    // 获取详情
    async getInfo(id){
      this.formData = await getPermissionDetail(id)
    },
    // 关闭事件
    btnCancel() {
      this.formData = {}
    },
    // 确定事件
    async btnOK(){
      // 表单校验
      await this.$refs.perForm.validate()
      // 提交数据
      if(this.formData.id){
        await updatePermission(this.formData)
      }else{
        await addPermission(this.formData)
      }
      // 提示
      this.$message.success(this.formData.id ? '修改成功':'添加成功')
      // 关闭
      this.showDialog = false
      // 列表更新
      this.$emit('update')
    }
  },
}
</script>
<style>
</style>